<!DOCTYPE html>
<html lang="en">
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100px;
        margin: 100px auto;
    }

    p {
        margin-bottom: 5px;
    }

    ul {
        border: 1px solid #000;
        width: 43px;
    }

    li {
        text-align: center;
        list-style: none;
    }

    li:nth-child(3) {
        border-top: 1px solid #000;
    }

    li:nth-child(3):hover {
        background-color: red;
    }

    li:hover {
        background-color: skyblue;
    }
</style>

<head>
</head>

<body>
    <div class="box">
        <p><button>输入法</button></p>
        <ul>
            <li>简写</li>
            <li>拼音</li>
            <li>关闭</li>
        </ul>
    </div>
</body>
<script>
    let button = document.getElementsByTagName('button')[0]
    let ul = document.getElementsByTagName('ul')[0]
    // console.log(button);
    let flag = true
    button.onclick = function () {
        if (flag == true) {
            ul.style.display = 'none'
            flag = false
        } else {
            ul.style.display = 'block'
            flag = true
        }
    }
    ul.children[2].onclick=function(){
        // console.log(1);
        ul.style.display = 'none'
        flag=false
    }
</script>

</html>